<template>
  <div class="app-container">
    <div class="editContaniner">
      <el-form ref="form" :model="form" label-width="120px" style="width:100%" :rules="rules">
        <el-form-item label="标题:" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题" :disabled="true" />
        </el-form-item>
        <el-form-item label="内容:" prop="content">
          <!-- <vue-ueditor-wrap v-model="form.content" :config="ueConfig" :destroy="true" @ready="ready" /> -->

          <el-card class="box-card">
            <div style="min-height:450px" v-html="form.content" />
          </el-card>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin-top:20px" @click="back">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

// import VueUeditorWrap from 'vue-ueditor-wrap'
import { getInformation } from '@/api/trembleSchool/informationChannel'
export default {
    components: {
        // VueUeditorWrap
    },
    props: {},
    data() {
        return {
            form: {
                title: '',
                content: '',
                editor: null
            },
            information_id: this.$route.query.information_id,
            rules: {
                title: [
                    { required: true, message: '请输入资讯标题', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '请输入资讯内容', trigger: 'change' }
                ]
            }
        }
    },
    computed: {},
    watch: {
        $route(val, val1) {
            this.information_id = this.$route.query.information_id
            this.getInformation()
        }
    },
    mounted() {
    // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
        this.getInformation()
    },
    methods: {
        getInformation() {
            getInformation({
                information_id: this.information_id
            }).then(res => {
                console.log('res', res)
                if (res.code === 200) {
                    console.log('title', res.data.data[0])
                    this.form.title = res.data.data[0].title
                    this.form.content = res.data.data[0].content
                }
            })
        },
        back() {
            this.$store.dispatch('tagsView/delView', this.$route)
            this.$router.replace('/trembleSchool/contentManagement/informationChannel')
        }
    }
}
</script>

<style lang="scss" scoped>
.editContaniner{
  width: 75%;
  margin: 0 auto;
  margin-top: 60px;
}
</style>
